<section class="page team-detail-page">
  <div class="title">
    {{teamId?'团队详情':'创建团队'}}
  </div>
  <nz-card>
    <ng-template #extra>
      <button nz-button [nzType]="'primary'" routerLink="/team-manage">
        <span>返回</span>
      </button>
    </ng-template>
    <ng-template #body>
      <form nz-form nzLayout="horizontal" [formGroup]="teamForm">
        <div nz-form-item nz-row>
          <div nz-form-label nz-col [nzSpan]="3">
            <label>团队名称</label>
          </div>
          <div nz-form-control nz-col [nzSpan]="10" [nzValidateStatus]="teamForm.controls.name">
            <nz-input formControlName="name" [nzPlaceHolder]="'用户名'" [nzSize]="'large'">
            </nz-input>
            <div nz-form-explain *ngIf="teamForm.controls.name.dirty&&teamForm.controls.name.hasError('required')">
              请输入团队名称
            </div>
          </div>
          <div nz-form-label nz-col style="margin-left:10px;">
            <button nz-button [nzType]="'primary'" (click)="saveTeam()">
              <span>{{teamId?'保存':'创建'}}</span>
            </button>
          </div>
        </div>
      </form>
    </ng-template>
  </nz-card>

  <!-- 团队成员 -->
  <nz-card *ngIf="teamId">
    <ng-template #title>
      成员列表
    </ng-template>
    <ng-template #extra>
      <button nz-button [nzType]="'primary'" (click)="showUserDialog(userContent)">
        <span>添加成员</span>
      </button>
    </ng-template>
    <ng-template #body>
      <nz-table #nzTable [nzAjaxData]="userDataSet" [nzIsPagination]="false" [nzScroll]="{y:300}">
        <thead nz-thead>
          <tr>
            <th nz-th>
              <span>用户名</span>
            </th>
            <th nz-th>
              <span>姓名</span>
            </th>
            <th nz-th>
              <span>管理员</span>
            </th>
            <th nz-th>
              <span>操作</span>
            </th>
          </tr>
        </thead>
        <tbody nz-tbody>
          <tr nz-tbody-tr *ngFor="let data of nzTable.data">
            <td nz-td>{{data.username}}</td>
            <td nz-td>{{data.realname}}</td>
            <td nz-td>
              <nz-switch (click)="updateTeamAdmin(data)" [(ngModel)]="data.admin"></nz-switch>
            </td>
            <td nz-td>
              <a (click)="deleteUser(data.object)">删除</a>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </ng-template>
  </nz-card>

  <nz-card *ngIf="teamId">
    <ng-template #title>
      项目列表
    </ng-template>
    <ng-template #extra>
      <button nz-button [nzType]="'primary'" (click)="showProjectDialog(projectContent)">
        <span>添加项目</span>
      </button>
    </ng-template>
    <ng-template #body>
      <nz-table #nzTable [nzAjaxData]="projectDataSet" [nzIsPagination]="false">
        <thead nz-thead>
          <tr>
            <th nz-th>
              <span>项目名称</span>
            </th>
            <th nz-th>
              <span>操作</span>
            </th>
          </tr>
        </thead>
        <tbody nz-tbody>
          <tr nz-tbody-tr *ngFor="let data of nzTable.data">
            <td nz-td>{{data.name}}</td>
            <td nz-td>
              <a (click)="deleteProject(data.id)">删除</a>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </ng-template>
  </nz-card>
</section>

<!--用户选择列表-->
<ng-template #userContent>
  <div class="user-content">
    <nz-table #nzTable [nzAjaxData]="_userDataSet" [nzShowSizeChanger]="true" [nzTotal]="userPage.total" [(nzPageIndex)]="userPage.pageIndex"
      (nzPageIndexChange)="getUsers()" [(nzPageSize)]="userPage.pageSize" (nzPageSizeChange)="getUsers()">
      <thead nz-thead>
        <tr>
          <th nz-th [nzCheckbox]="true">
            <label>
            </label>
          </th>
          <th nz-th>
            <span>用户名</span>
          </th>
          <th nz-th>
            <span>姓名</span>
          </th>
        </tr>
      </thead>
      <tbody nz-tbody>
        <tr nz-tbody-tr *ngFor="let data of nzTable.data">
          <td nz-td [nzCheckbox]="true">
            <label nz-checkbox [(ngModel)]="data.checked"></label>
          </td>
          <td nz-td>{{data.username}}</td>
          <td nz-td>{{data.realname}}</td>
        </tr>
      </tbody>
    </nz-table>
  </div>
</ng-template>



<!--项目选择列表-->
<ng-template #projectContent>
  <div class="project-content">
    <nz-table #nzTable [nzAjaxData]="_projectDataSet" [nzShowSizeChanger]="true" [nzTotal]="projectPage.total" [(nzPageIndex)]="projectPage.pageIndex"
      (nzPageIndexChange)="getProjects()" [(nzPageSize)]="projectPage.pageSize" (nzPageSizeChange)="getProjects()">
      <thead nz-thead>
        <tr>
          <th nz-th [nzCheckbox]="true">
            <label>
            </label>
          </th>
          <th nz-th>
            <span>项目名称</span>
          </th>
        </tr>
      </thead>
      <tbody nz-tbody>
        <tr nz-tbody-tr *ngFor="let data of nzTable.data">
          <td nz-td [nzCheckbox]="true">
            <label nz-checkbox [(ngModel)]="data.checked"></label>
          </td>
          <td nz-td>{{data.name}}</td>
        </tr>
      </tbody>
    </nz-table>
  </div>
</ng-template>
